<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24" class="search-header" style="white-space: nowrap">
        <div nz-col [nzSpan]="4">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="clientId">客户端</nz-form-label>
                <nz-form-control class="search-form-control">
                    <nz-select formControlName="clientId" [nzAllowClear]="true">
                        <nz-option *ngFor="let client of clients" [nzValue]="client.clientId"
                            [nzLabel]="client.clientName"></nz-option>
                    </nz-select>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="4">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="roleName">角色名</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="search-input" nz-input formControlName="roleName" placeholder="角色名" />
                    <div *ngIf="submitted && fm['roleName'].invalid" class="alert">
                        <div *ngIf="fm['roleName'].errors?.['maxlength']">长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="4">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="roleKey">权限字符</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="search-input" nz-input formControlName="roleKey" placeholder="权限字符" />
                    <div *ngIf="submitted && fm['roleKey'].invalid" class="alert">
                        <div *ngIf="fm['roleKey'].errors?.['maxlength']">长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="4">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="enabled">状态</nz-form-label>
                <nz-form-control class="search-form-control">
                    <nz-select class="search-input" class="role-enabled" name="enabled" formControlName="enabled"
                        [nzAllowClear]="true">
                        <nz-option class="search-input" nzValue="true" nzLabel="正常"></nz-option>
                        <nz-option class="search-input" nzValue="false" nzLabel="停用"></nz-option>
                    </nz-select>
                </nz-form-control>
            </div>
        </div>

        <div nz-col [nzSpan]="8">
            <div nz-row>
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="true"
                        (createEvent)="onCreate(roleMenuTitle, roleMenuContent)"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="roles" nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>角色ID</th>
                <th>角色名称</th>
                <th>权限字符</th>
                <th>数据权限</th>
                <th>角色状态</th>
                <th>客户端</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let role of roles">
                <td>{{role.roleId}}</td>
                <td>{{role.roleName}}</td>
                <td>{{role.roleKey}}</td>
                <td>{{role.dataScope}}</td>
                <td>{{role.enabled ? '正常' : '停用'}}</td>
                <td>{{role.clientName}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button class="action-button normal-button" (click)="onDetail(detailTitle, detailContent, role)">详情</button>
                    <button nz-button class="action-button normal-button" (click)="onUpdate(roleMenuTitle, roleMenuContent, role)">编辑</button>
        
                    <button class="action-button" nz-button nz-dropdown [nzDropdownMenu]="more_action">
                        更多
                        <span nz-icon nzType="down"></span>
                    </button>
                    <nz-dropdown-menu #more_action="nzDropdownMenu">
                        <ul nz-menu nzSelectable style="min-width: 80px;  text-align: center;">
                            <li>
                                <button nz-button class="action-button delete-button" (click)="onDelete(role.roleId)">删除</button>
                            </li>
                            <li>
                                <button nz-button class="action-button normal-button" style="width: 65px;"
                                    (click)="onDataPerms(dataPermTitle, dataPermContent, role)">数据权限</button>
                            </li>
                        </ul>
                    </nz-dropdown-menu>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>

<nz-modal>
    <ng-template #roleMenuTitle>
        {{editTitle}}
        @if (roleName != null) {
            <span style="color: rgb(55, 134, 90);">{{roleName}}</span>
        }
    </ng-template>
    <ng-template #roleMenuContent>
        <app-add-role (addRoleEvent)="onAddRoleEvent($event)" [modeSubject]="modeSubject"></app-add-role>
    </ng-template>
</nz-modal>

<nz-modal>
    <ng-template #detailTitle>{{editTitle}}</ng-template>
    <ng-template #detailContent>
        <app-role-detail (detailEvent)="onDetailEvent($event)" [roleSubject]="roleSubject"></app-role-detail>
    </ng-template>
</nz-modal>

<nz-modal>
    <ng-template #dataPermTitle>数据权限</ng-template>
    <ng-template #dataPermContent>
        <app-role-data-perms (dataPermEvent)="onDataPermEvent($event)"
            [dataPermSubject]="dataPermSubject"></app-role-data-perms>
    </ng-template>
</nz-modal>